<template>
  <div class="contnet">
    <el-form class="top">
      <el-form-item>
        <h3>活动名称</h3>
        <el-input v-model="input" style="width: 240px" placeholder="请输入活动名称" />
        <h3>渠道名称</h3>
        <el-select v-model="value" placeholder="请选择渠道" style="width: 240px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <h3>活动状态</h3>
        <el-select v-model="value" placeholder="请选择活动状态" style="width: 240px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <h3>活动类型</h3>
        <el-select v-model="value" placeholder="请选择活动类型" style="width: 240px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>  
      <el-form-item class="btn">
        <el-button type="primary" @click="getActivityList">搜索</el-button>
        <el-button>重置</el-button>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" plain>新增</el-button>
        <el-button type="success" plain>修改</el-button>
        <el-button type="danger" plain>删除</el-button>
        <el-button type="warning" plain>导出</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="活动编号" width="120">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column property="name" label="活动名称" width="120" />
      <el-table-column property="address" label="活动名称" show-overflow-tooltip />
      <el-table-column property="address" label="活动名称" show-overflow-tooltip />
      <el-table-column property="address" label="活动简介" show-overflow-tooltip />
      <el-table-column property="address" label="活动类型" show-overflow-tooltip />
      <el-table-column property="address" label="活动明细" show-overflow-tooltip />
      <el-table-column property="address" label="活动状态" show-overflow-tooltip />
      <el-table-column property="address" label="活动起始时间" show-overflow-tooltip />
      <el-table-column property="address" label="活动结束时间" show-overflow-tooltip />
      <el-table-column label="操作" fixed="right" width="140">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     <Pagination :total="total" @changePage="setPage" @changeRows="setRows"></Pagination>
  </div>
</template>
<script lang="ts" setup>
import { addActivity, editActivity,exportActivity,getAllChannellists, deleteAllActivity,getIdSpecificActivity } from "@/tienchin/cuxiaohuodong";
import { ElMessage, ElMessageBox } from "element-plus";
import Vue from "vue";
import { ref } from "vue";
import { ElTable } from 'element-plus'


const activityList = ref([]);
const total = ref(0);
const getAllChannellists = () => {
  getAllChannellists(queryInfo.value).then((res) => {
    console.log(res);
    if (res.code != 200) return ElMessage.error("查询募捐活动列表失败");
    activityList.value = res.data.list;
    total.value = res.data.count;
  });
};
// interface User {
//   date: string
//   name: string
//   address: string
// }

// const input = ref('')
</script>

<style lang="scss" scoped>
h3 {
  margin: 10px;
  margin-left: 20px;
  font-weight: 600;
}
.top {
  margin-top: 20px;
}
.btn {
  margin-left: 20px;
}
</style>